<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  main{
    width: 400px;
    height: 400px;
    /* border: 1px solid red; */
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center -200px;
    transform: perspective(900px) rotateX(-60deg);
    transition: all 1s;
  }
  /* 这里最好用一个标签(任何块级标签都可以这里用了article)包裹带有transition动画的main元素，
  (由于mian的样式有旋转效果所以它的标签已经不再旋转图的中心位置，所以按正常人思维鼠标hover滑过中心位置时没有反应，
  实现具有css hover(切记时css hover)滑过的3D动画效果时，最好给具有transform-style: preserve-3d样式的标签一个父级标签,给父级标签加hover效果，
  类似下面操作：article:hover main，如果是js操作其他按钮操作这样的效果则不需要这样，直接操作mainDOM即可)
   */
   article:hover main{
    transform: perspective(900px) rotateX(-60deg) rotateY(360deg);
  }
   img{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: center center -200px;
   }
   img:nth-of-type(1){
    transform:rotateY(90deg)
   }
   img:nth-of-type(2){
    transform:rotateY(180deg)
   }
   img:nth-of-type(3){
    transform:rotateY(270deg)
   }
   img:nth-of-type(4){
    transform:rotateY(360deg)
   }
</style>
<body>
  <article>
    <main>
      <img src="404.png" alt="">
      <img src="logo.jpg" alt="">
     <img src="404.png" alt="">
     <img src="logo.jpg" alt="">
   </main>
  </article>
    
</body>
<script>
    document.body.onclick=function(){
     const main=document.querySelector("main")
     main.style.transform='perspective(900px) rotateX(-60deg) rotateY(360deg)'
    }

    
</script>
</html>
